<template>
    <div>
        <div v-if="$slots.left || $slots.right" ref="topRow" class="topRow">
            <div>
                <slot name="left" />
            </div>
            <div>
                <slot name="right" />
            </div>
        </div>
        <yfTable ref="tableRef" v-bind="$attrs" :height="height - topHeight" :columns="columns" :data="data" show-summary
            highlight-current-row />
    </div>
</template>
      
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { yfTable, YfTableColumn, YfLinkBtn } from '@/components';
import { Http, HttpSource } from '@/utils';

interface NodeProps {
    height: number,
    loadMethod?: Function,
    opt?: (string | YfLinkBtn)[],
}

const props = withDefaults(defineProps<NodeProps>(), {
    opt: () => ['modify']
})

const topRow = ref(), topHeight = ref(0);


let lastQuery: any = {};
const tableRef = ref(), data = ref([]), columns: YfTableColumn[] = [
    { type: 'index', width: '60px' },
    { _type: 'datetime' },
    { key: 'timeNodeDesc' },
    { key: 'inBalance' },
    { key: 'outBalance' },
];


const loadData = async (params: object = {}) => {
    lastQuery = {
        timeNodeStatusList: ['1', '2'],
        ...params
    }
    data.value = [];
    if (props.loadMethod) {
        data.value = await props.loadMethod(lastQuery);
    } else {
        const res = await Http.post(HttpSource.Java, 'listTimeNode', lastQuery)
        data.value = res?.result
    }
}

defineExpose({
    loadData,
    table: tableRef.value?.table
})

onMounted(() => {
    // !props.loadMethod && loadData(lastQuery)
    if (topRow.value) {
        const h = topRow.value.offsetHeight;
        topHeight.value = h ? h + 10 : 0;
    }
})
</script>

<style lang="scss" scoped>
.topRow {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 10px;
}
</style>
